<!doctype html>
<html lang="zh">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title></title>
		<style type="text/css">
			html,
			body,
			canvas {
				padding: 0;
				margin: 0;
				width: 100%;
				height: 100%;
				overflow-y: hidden;
				background-color: transparent;
			}
		</style>
	</head>

	<body>
		<canvas id="lime-signature"></canvas>
		<script type="text/javascript" src="./uni.webview.1.5.3.js"></script>
		<script type="text/javascript" src="./signature.js"></script>
		<script>
			var signature = null
			var timer = null
			var isStart = false
			var options = null
			console.log = function (...args) {
				postMessage(args)
			}
			// function stringify(key, value) {
			// 	if (typeof value === 'object' && value !== null) {
			// 		if (cache.indexOf(value) !== -1) {
			// 			return;
			// 		}
			// 		cache.push(value);
			// 	}
			// 	return value;
			// };
			function emit(event, data) {
				postMessage({
					event,
					data:
						typeof data !== 'object' && data !== null
							? data
							: JSON.stringify(data),
				})
				// cache = [];
			}

			function postMessage(data) {
				uni.postMessage({
					data,
				})
			}

			function update(v = {}) {
				if (signature) {
					options = v
					signature.pen.setOption(v)
				} else {
					signature = new Signature.Signature({
						el: 'lime-signature',
					})
					canvasEl = signature.canvas.get('el')
					options = v
					signature.pen.setOption(v)
					const width = signature.canvas.get('width')
					const height = signature.canvas.get('height')

					emit({ changeSize: { width, height } })
				}
			}

			function clear() {
				signature.clear()
			}

			function undo() {
				signature.undo()
			}
			function isEmpty() {
				const isEmpty = signature.isEmpty()
				emit({ isEmpty })
			}
			function save(args) {
				// delete args.success;
				// delete args.fail;
				clearTimeout(timer)
				timer = setTimeout(() => {
					let path = canvasEl.toDataURL()
					const { backgroundColor, landscape } = options
					if (backgroundColor || landscape) {
						const canvas = document.createElement('canvas')
						const width = this.signature.canvas.get('width')
						const height = this.signature.canvas.get('height')
						const pixelRatio =
							this.signature.canvas.get('pixelRatio')
						const size = [width, height]
						if (landscape) {
							size.reverse()
						}
						canvas.width = size[0] * pixelRatio
						canvas.height = size[1] * pixelRatio
						const context = canvas.getContext('2d')
						context.scale(pixelRatio, pixelRatio)
						if (landscape) {
							context.translate(0, width)
							context.rotate(-Math.PI / 2)
						}
						if (backgroundColor) {
							context.fillStyle = backgroundColor
							context.fillRect(0, 0, width, height)
						}
						context.drawImage(
							this.signature.canvas.get('el'),
							0,
							0,
							width,
							height
						)
						path = canvas.toDataURL()
						canvas.remove()
					}
					if (typeof path == 'string') {
						const index = Math.ceil(path.length / 8)
						for (var i = 0; i < 8; i++) {
							if (i == 7) {
								emit({ success: path.substr(i * index, index) })
							} else {
								emit({ file: path.substr(i * index, index) })
							}
						}
					} else {
						console.error('canvas no data')
						emit({ fail: 'canvas no data' })
					}
				}, 30)
			}
		</script>
	</body>
</html>
